<!-- eslint-disable no-mixed-spaces-and-tabs -->
<template>
	<div class="container">
		<div>
			<a-form ref="searchRef" :label-col="{style: { width: '120px' }}" :model="searchState" @finish="initData()">
				<a-row :gutter="20">
					<a-col :span="6">
						<a-form-item label="城市公司/专业公司">
							<a-select v-model:value="searchState.company_id" :show-search="true" placeholder="请选择城市公司/专业公司" :options="companyOptions" option-filter-prop="label" allow-clear></a-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="选择项目">
							<a-select v-model:value="searchState.project_id" :show-search="true" placeholder="请选择项目" :options="innerProjectOptions" option-filter-prop="label" allow-clear></a-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="物料名称">
							<a-input v-model:value="searchState.material_name" placeholder="请输入" allow-clear></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item>
							<a-space>
								<a-button type="primary" html-type="submit">
									<search-outlined />搜索
								</a-button>
								<a-button v-permission="84" type="primary" @click="addPrice()">
									<plus-outlined />添加价格记录
								</a-button>
							</a-space>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<div>
			<a-tabs v-model:activeKey="activeKey" @change="changeTab">
				<a-tab-pane :key="1" tab="月浮动物资">
					<a-calendar v-model:value="calendar" mode="year" :disabled-date="(currentDate) => dayjs(currentDate).format('YYYY-MM') > dayjs().format('YYYY-MM')">
						<template #headerRender="{ value: current, onChange }">
							<div class="text-right">
								<a-select
									:dropdown-match-select-width="false"
									class="my-year-select"
									:value="String(current.year())"
									@change="
										newYear => {
											onChange(current.year(+newYear));
										}
									"
								>
									<a-select-option
										v-for="val in getYears(current)"
										:key="String(val)"
										class="year-item"
									>
										{{ val }}
									</a-select-option>
								</a-select>
							</div>
						</template>
						<template #monthCellRender="{ current }">
							<div :class="current.format('YYYY-MM') > dayjs().format('YYYY-MM')? 'disabled': ''" @click="showPriceList(current)">
								<div v-if="getListData(current, activeKey).completion_qty > 0 || getListData(current, activeKey).un_completion_qty > 0" style="position: absolute; top: 5px;" class="click-box-have">
									<!-- <a-tooltip placement="top" :class="getListData(current, activeKey).un_completion_qty === 0? 'completion' : 'uncompletion'">
										<template #title>
											<span>查看明细</span>
										</template>
										<a-button v-permission="263" size="small" class="mr-5" :disabled="current.format('YYYY-MM') > dayjs().format('YYYY-MM') " type="link" @click="showPriceList(current)"><search-outlined /></a-button>
									</a-tooltip> -->
									<!-- <a-tooltip placement="top">
										<template #title>
											<span>新增</span>
										</template>
										@click="addPrice(current)"
										<a-button v-permission="84" size="small" class="mb-1 mr-5" type="link" :disabled="current.format('YYYY-MM') > dayjs().format('YYYY-MM')"><plus-outlined /></a-button>
									</a-tooltip> -->
									<!-- <div class="click-box-have"> -->
									<div>
										<a-badge status="success">
											<template #text>
												已维护物料数：{{ getListData(current, activeKey).completion_qty }}
											</template>
										</a-badge>
									</div>
									<div v-if="getListData(current, activeKey).un_completion_qty">
										<a-badge status="error">
											<template #text>
												待维护物料数：{{ getListData(current, activeKey).un_completion_qty }}
											</template>
										</a-badge>
									</div>
									<!-- </div> -->
								</div>
								<!-- @click="addPrice(current)" -->
								<div v-else class="text-center click-box">
									<a-button v-permission="84" class="mt-3" style="font-size: 16px;" type="link" :disabled="current.format('YYYY-MM') > dayjs().format('YYYY-MM')"><plus-outlined /></a-button>
								</div>
							</div>
						</template>
					</a-calendar>
				</a-tab-pane>
				<a-tab-pane :key="2" tab="日浮动物资">
					<a-calendar v-model:value="calendar" mode="month" :disabled-date="(currentDate) => dayjs(currentDate).format('YYYY-MM-DD') > dayjs().format('YYYY-MM-DD') || dayjs(currentDate).format('YYYY-MM') < dayjs().format('YYYY-MM')">
						<template #headerRender="{ value: current, onChange }">
							<div class="text-right">
								<a-select
									:dropdown-match-select-width="false"
									class="my-year-select"
									:value="String(current.year())"
									@change="
										newYear => {
											onChange(current.year(+newYear));
										}
									"
								>
									<a-select-option
										v-for="val in getYears(current)"
										:key="String(val)"
										class="year-item"
									>
										{{ val }}
									</a-select-option>
								</a-select>
								<span class="ml-5">
									<a-select
										:dropdown-match-select-width="false"
										:value="String(current.month())"
										@change="
											selectedMonth => {
												onChange(current.month(parseInt(String(selectedMonth), 10)));
											}
										"
									>
										<a-select-option
											v-for="(val, index) in getMonths(current)"
											:key="String(index)"
											class="month-item"
										>
											{{ val }}
										</a-select-option>
									</a-select>
								</span>
							</div>
						</template>
						<template #dateCellRender="{ current }">
							<div :class="current.format('YYYY-MM-DD') > dayjs().format('YYYY-MM-DD')? 'disabled': '' || current.format('YYYY-MM') < dayjs().format('YYYY-MM')? 'disabled': ''" @click="showPriceList(current)">
								<!-- <div v-if="[0, 6].includes(current.day())" class="completion">
									<a-badge status="success">
										<template #text>
											周六日无需维护
										</template>
									</a-badge>
								</div> -->
								<!-- {{ getListData(current, activeKey) }} -->
								<div v-if="getListData(current, activeKey).completion_qty > 0 || getListData(current, activeKey).un_completion_qty > 0" style="position: absolute; top: 5px;" class="click-box-have">
									<!-- <a-tooltip placement="top" :class="getListData(current, activeKey).un_completion_qty === 0? 'completion' : 'uncompletion'">
										<template #title>
											<span>查看明细</span>
										</template>
										<a-button v-permission="263" size="small" class="mr-5" :disabled="current.format('YYYY-MM-DD') > dayjs().format('YYYY-MM-DD')" type="link" @click.stop="showPriceList(current)"><search-outlined /></a-button>
									</a-tooltip>
									<a-tooltip placement="top">
										<template #title>
											<span>新增</span>
										</template>
										<a-button v-permission="84" size="small" class="mb-1 mr-5" type="link" :disabled="current.format('YYYY-MM-DD') > dayjs().format('YYYY-MM-DD')" @click="addPrice(current)"><plus-outlined /></a-button>
									</a-tooltip> -->
									<!-- <div> -->
									<div>
										<a-badge status="success">
											<template #text>
												今日验收：{{ getListData(current, activeKey).completion_qty }}
											</template>
										</a-badge>
									</div>
									<div v-if="getListData(current, activeKey).un_completion_qty">
										<a-badge status="error">
											<template #text>
												待维护价格：{{ getListData(current, activeKey).un_completion_qty }}
											</template>
										</a-badge>
									</div>
									<!-- </div> -->
								</div>
								<!-- @click="addPrice(current)" -->
								<div v-else class="text-center click-box">
									<a-button class="mt-3" type="link" :disabled="current.format('YYYY-MM-DD') > dayjs().format('YYYY-MM-DD')"><plus-outlined /></a-button>
								</div>
							</div>
						</template>
					</a-calendar>
				</a-tab-pane>
			</a-tabs>
		</div>
		<a-modal v-model:visible="modalRef.visible" :width="400" :title="`设置价格`" @ok="setPrice">
			<a-form ref="formModalRef" :model="modalRef.form" v-bind="{labelCol: { style: { width: '100px' } }}">
				<a-form-item label="计价方式" name="price_type" :rules="{ required: true, message: '请选择计价方式' }">
					<a-radio-group v-model:value="modalRef.form.price_type">
						<a-radio :value="1">月浮动</a-radio>
						<a-radio :value="2">日浮动</a-radio>
					</a-radio-group>
				</a-form-item>
				<!-- <a-form-item label="项目" name="project_id" :rules="{ required: true, message: '请选择项目' }">
					<a-select v-model:value="modalRef.form.project_id" :show-search="true" placeholder="请选择项目" :options="innerProjectOptions" option-filter-prop="label" allow-clear :disabled="!!modalRef.form.id" @change="changeProject"></a-select>
				</a-form-item> -->
				<a-form-item label="物料名称" name="material_name" :rules="{ required: true, message: '请选择物料名称' }">
					<a-select v-model:value="modalRef.form.material_name" :show-search="true" placeholder="请选择项目" :options="modalMaterialOptions" option-filter-prop="label" allow-clear :disabled="!!modalRef.form.id" @change="changeMaterial('material_name')"></a-select>
				</a-form-item>
				<a-form-item label="物料规格" name="model_name" :rules="{ required: true, message: '请选择物料规格' }">
					<a-select v-model:value="modalRef.form.model_name" :show-search="true" placeholder="请选择物料规格" :options="modalMaterialModelOptions" option-filter-prop="label" allow-clear :disabled="!!modalRef.form.id" @change="changeMaterial('model')"></a-select>
				</a-form-item>
				<a-form-item label="计量单位" name="material_id" :rules="{ required: true, message: '请选择计量单位' }">
					<a-select v-model:value="modalRef.form.material_id" :show-search="true" placeholder="请选择计量单位" :options="modalMaterialUnitOptions" option-filter-prop="label" allow-clear :disabled="!!modalRef.form.id" @change="changeMaterial('unit')"></a-select>
				</a-form-item>
				<a-form-item label="品牌/厂家" name="brand_id">
					<a-tree-select v-model:value="modalRef.form.brand_id" :dropdown-match-select-width="false" :show-search="true" placeholder="请选择品牌/厂家" allow-clear tree-default-expand-all :tree-data="brandTree" tree-node-filter-prop="label" :check-strictly="true" style="width:100%" @change="changeMaterial('brand_id')">
						<template #title="{ label }">{{ label }}</template>
					</a-tree-select>
				</a-form-item>
				<a-form-item label="区域" name="region" :rules="{ required: true, message: '请补充项目区域再操作' }">
					<a-cascader v-model:value="modalRef.form.region" :check-strictly="true" :options="regionOptions" :load-data="loadRegionData" placeholder="请选择区域" change-on-select @blur="changeMaterial('brand_id')" />
				</a-form-item>
				<a-form-item v-if="modalRef.form.price_type === 2" label="设置日期" name="setting_date" :rules="{ required: true, message: '请输入设置日期' }">
					<a-date-picker v-model:value="modalRef.form.setting_date" @blur="changeMaterial('setting_date')" />
				</a-form-item>
				<a-form-item v-if="modalRef.form.price_type === 1" label="设置年月" name="setting_date" :rules="{ required: true, message: '请输入设置年月' }">
					<a-date-picker v-model:value="modalRef.form.setting_date" picker="month" :disabled-date="disabledDateMonth" @blur="changeMaterial('setting_date')" @change="change" />
				</a-form-item>
				<a-form-item v-if="modalRef.form.price_type === 1" label="生效时间" name="effective_date_range" :rules="{ required: true, message: '请输入生效时间' }">
					<a-range-picker v-model:value="modalRef.form.effective_date_range" format="YYYY/MM/DD" value-format="YYYY-MM-DD" :disabled-date="disabledDate" :disabled="!!modalRef.form.is_exit" />
				</a-form-item>

				<a-form-item label="不含税基准价" name="price" :rules="{ required: true, message: '请输入不含税基准价' }">
					<a-input-number v-model:value="modalRef.form.price" style="width: 100%;" placeholder="请输入不含税基准价" min="0" :precision="2" allow-clear :disabled="!!modalRef.form.is_exit"></a-input-number>
				</a-form-item>
				<a-form-item label="附件" name="file_path" :rules="{ required: true, message: '请上传附件' }">
					<a-upload v-model:file-list="modalRef.form.file_path" name="upload" :action="`${baseURL}/contract/upload`" :show-upload-list="true" :headers="{ Authorization: `Bearer ${proxy.$cookies.get('token')}` }" :before-upload="beforeUpload" @change="fileChangeUpload">
						<a-button>
							<template v-if="modalRef.upload">
								<loading-outlined />上传中...
							</template>
							<template v-else>
								<import-outlined />上传附件
							</template>
						</a-button>
					</a-upload>
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>
<script setup>
import { computed, getCurrentInstance, reactive, ref, watch } from "vue";
import { usePagination } from "vue-request";
import { post, postJson } from "@/utils/index.js";
import { listToTree } from "../utils";
import { EditOutlined, PlusOutlined, SearchOutlined, SnippetsOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
import { useRoute, useRouter } from "vue-router";
import { baseURL } from "@/utils/request.js";
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const searchRef = ref();
const formModalRef = ref();
const searchState = reactive({});
const projectOptions = ref([]);
const companyOptions = ref([]);
const query = route.query;
const modalRef = ref({
	visible: false,
	upload: false,
	form: {
		file_path: [],
	},
	materialOptions: [],
});
const activeKey = ref(1);
const calendar = ref(dayjs());
const dataList = ref([]);
// 禁用月份
const disabledDateMonth = (current) => {
	if (dayjs(current).format('YYYY-MM') > dayjs().format('YYYY-MM')) {
		return true
	}

	return false
}
// 禁用特定时间范围外的日期
const disabledDate = (current) => {
	// 禁用选择月份之前的日期
	if (dayjs(current).format('YYYY-MM') < dayjs(modalRef.value.form.setting_date).format('YYYY-MM')) {
		return true;	
	}
	// 禁用之后的日期
	// if (current > new Date('2024-07-01T23:59:59')) {
	// 	return true;
	// }
	// 允许其他日期
	return false;
};
// 改变物料时触发
const changeMaterial = async (column) => {
	switch (column) {
	case 'material_name':
		modalRef.value.form.model_name = null;
		modalRef.value.form.material_id = null;
		break;
	case 'model':
		modalRef.value.form.material_id = null;
		break;
	case 'setting_date':
		modalRef.value.form.effective_date_range = modalRef.value.form.setting_date ? [dayjs(modalRef.value.form.setting_date).format('YYYY-MM-01'), dayjs(modalRef.value.form.setting_date).endOf('month').format('YYYY-MM-DD')] : []
		break;
	}
	const [material_id, brand_id = 0, price_type, region, setting_date] = [
		modalRef.value.form.material_id, modalRef.value.form.brand_id, modalRef.value.form.price_type, modalRef.value.form.region,
		modalRef.value.form.setting_date,
	]
	if (!material_id || !price_type || !region || !region.length || !setting_date) {
		return;
	}
	const result = await postJson("price/fd/manage/price", {
		material_id, brand_id, price_type, region, setting_date,
	})
	if (result.priceManage) {
		modalRef.value.form.is_exit = true;
		modalRef.value.form.price = result.priceManage.price;
		modalRef.value.form.effective_date_range = result.priceManage.effective_date_range;
	} else {
		modalRef.value.form.is_exit = false;
		modalRef.value.form.price = null;
	}
}
// 选择月份回调
const change = (days, value) => {
	// 获取到选择月份之后给生效时间默认值
	const lastDay = dayjs(value + '-01').endOf('month').format('YYYY-MM-DD')
	modalRef.value.form.effective_date_range = [value + '-01', lastDay]
};
// 计算最后一天
// function getLastDayOfMonth(year, month) {
// 	return new Date(year, month, 0).getDate();
// }
const getRegion = async parentId => {
	return await post("region/cascader", { parent_id: parentId });
};
// 获取品牌下拉数据
const brandTree = ref([]);
post("dictionary", { root_id: 1414 }).then(data => {
	// brandList.value = data;
	const dataMap = {};
	for (const d of data) {
		dataMap[d.id] = d;
		if (dataMap[d.parent_id]) {
			dataMap[d.parent_id].disabled = true;
		}
	}
	brandTree.value = listToTree(data, 1414)
});
const regionOptions = ref([]);
getRegion(0).then(data => {
	regionOptions.value = data;
});
post("department/projects?type=2", {
	parent_ids: JSON.stringify([78, 24])
}).then(({ data }) => {
	companyOptions.value = data.map(d => {
		return {
			value: d.id,
			label: d.name
		};
	});
});
const loadRegionData = options => {
	const option = options[options.length - 1];
	if (option.level === 1) {
		option.loading = true;
		return getRegion(option.value).then(data => {
			option.loading = false;
			option.children = data;
			regionOptions.value = [...regionOptions.value];
		});
	} else {
		option.loading = false;
		option.children = [];
		regionOptions.value = [...regionOptions.value];
	}

};
const getProjects = async () => {
	const projectResult = await post("price/fd/projects");
	projectOptions.value = projectResult.map(d => {
		return {
			value: d.id,
			label: d.name,
			parseIds: d.parent_ids.split(",").map(item => parseInt(item)),
			region: d.region,
		};
	});
}
getProjects()
const innerProjectOptions = computed(() => {
	let options = [];
	if (!projectOptions.value.length) return options;
	if (searchState.company_id) {
		options = projectOptions.value.filter((item) => {
			return item.parseIds.includes(searchState.company_id);
		})
	} else {
		options = projectOptions.value;
	}
	if (!options.filter(item => item.value === searchState.project_id).length) {
		searchState.project_id = null;
	}
	return options;
});
const columns = [
	{
		title: "序号",
		dataIndex: "id",
		key: "id",
		width: 80,
		align: "left",
		customRender: ({ text, record, index, column }) => {
			return index + 1;
		}
	},
	{
		title: "项目名称",
		dataIndex: "project",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text?.name;
		}
	},
	{
		title: "物资名称",
		dataIndex: "material",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text?.name;
		}
	},
	{
		title: "规格型号",
		dataIndex: "material",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text?.model;
		}
	},
	{
		title: "计量单位",
		dataIndex: "material",
		sorter: false,
		width: 100,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text?.unit;
		}
	},
	{
		title: "品牌",
		dataIndex: "brand",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text?.name;
		}
	},
	{
		title: "当前价格",
		dataIndex: "price",
		sorter: false,
		width: 100,
		ellipsis: true,
	},
	{
		title: "设置日期",
		dataIndex: "setting_date",
		sorter: false,
		width: 150,
		ellipsis: true,
	},
	{
		title: "维护人",
		dataIndex: "user",
		sorter: false,
		width: 150,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return text?.fullname;
		}
	},
	{
		title: "操作",
		key: "operation",
		sorter: false,
		fixed: "right",
		width: 300,
		align: "center"
	}
];
const initData = async () => {
	const filter = {
		...searchState,
		price_type: activeKey.value,
	}
	if (activeKey.value === 1) {
		filter.start_date = calendar.value.startOf('year').format('YYYY-MM-DD');
		filter.end_date = calendar.value.endOf('year').format('YYYY-MM-DD');
	} else {
		// 获取日历的显示范围
		const _monthStartDate = dayjs(calendar.value).startOf('month');
		filter.start_date = _monthStartDate.subtract(_monthStartDate.day() - 1, 'days').format('YYYY-MM-DD');
		filter.end_date = dayjs(filter.start_date).add(41, 'days').format('YYYY-MM-DD');
	}
	if (filter.company_id && !filter.project_id) {
		if (!projectOptions.value.length) await getProjects();
		filter.project_ids = projectOptions.value.filter(item => item.parseIds.includes(filter.company_id)).map(item => item.value).join(',');
	}
	dataList.value = await post("price/fd/task/statistics", filter);
	const query = {
		...searchState,
		price_type: activeKey.value,
		calendar: calendar.value.format('YYYY-MM-DD'),
	};
	router.replace({ query: {
		...query,
	}})
};
watch(calendar, () => {
	initData();
})
if (query) {
	if (query.company_id) searchState.company_id = parseInt(query.company_id);
	if (query.project_id) searchState.project_id = parseInt(query.project_id);
	if (query.material_name) searchState.material_name = query.material_name;
	if (query.price_type) activeKey.value = parseInt(query.price_type);
	if (query.calendar) calendar.value = dayjs(query.calendar);
	initData({});
}
const changeTab = () => {
	calendar.value = dayjs();
};
const getYears = (value) => {
	const year = value.year();
	const years = [];
	for (let i = year - 10; i < year + 10; i += 1) {
		years.push(i);
	}
	return years;
};
const getMonths = (value) => {
	const localeData = value.localeData();
	const months = [];
	for (let i = 0; i < 12; i++) {
		months.push(localeData.monthsShort(value.month(i)));
	}
	return months;
};
const getListData = (value, type) => {
	let _data = {};
	const _date = type === 1 ? value.format('YYYY-MM') : value.format('YYYY-MM-DD');
	for (const data of dataList.value) {
		if (_date !== data.date) continue;
		_data = data;
	}
	return _data;
}
const addPrice = (data) => {
	modalRef.value.visible = true;
	modalRef.value.form = {
		file_path: [],
	};
	setTimeout(() => {
		if (data) {
			modalRef.value.form.price_type = activeKey.value;
			modalRef.value.form.setting_date = dayjs(calendar.value);
		}
		post("price/fd/materials").then((data) => {
			modalRef.value.materialOptions = data;
		});
	}, 0)
};
const showPriceList = (data) => {
	let path = `price/list?price_type=${activeKey.value}&setting_date=${data.format('YYYY-MM-DD')}&toReturn=1`;
	if (searchState.company_id) {
		path += `&company_id=${searchState.company_id}`;
	}
	if (searchState.project_id) {
		path += `&project_id=${searchState.project_id}`;
	}
	if (searchState.material_name) {
		path += `&material_name=${searchState.material_name}`;
	}
	router.push(path)
}
const modalMaterialOptions = computed(() => {
	const map = {};
	// if (modalRef.value.form?.project_id) {
	for (const material of modalRef.value.materialOptions) {
		// if (!(material.project_ids.includes(modalRef.value.form.project_id))) continue;
		// if (map[material.name]) continue;
		map[material.name] = {
			value: material.name,
			label: material.name,
		};
	}
	// }
	return Object.values(map);
})

const modalMaterialModelOptions = computed(() => {
	const map = {};
	if (modalRef.value.form?.material_name) {
		for (const material of modalRef.value.materialOptions) {
			if (material.name !== modalRef.value.form.material_name) continue;
			if (map[material.model]) continue;
			map[material.model] = {
				value: material.model,
				label: material.model,
			};
		}
	}
	return Object.values(map);
})

const modalMaterialUnitOptions = computed(() => {
	const map = {};
	if (modalRef.value.form?.model_name) {
		for (const material of modalRef.value.materialOptions) {
			if (material.model !== modalRef.value.form.model_name) continue;
			if (map[material.unit]) continue;
			map[material.unit] = {
				value: material.id,
				label: material.unit,
			};
		}
	}
	return Object.values(map);
})

const setPrice = () => {
	formModalRef.value.validate().then(res => {
		proxy.$message.destroy();
		proxy.$message.destroy();
		const params = { ...modalRef.value.form };
		if (params.price_type === 1) {
			params.setting_date = dayjs(params.setting_date.$d).format('YYYY-MM-01')
		} else {
			params.setting_date = dayjs(params.setting_date.$d).format('YYYY-MM-DD')
		}
		params.material_type = modalRef.value.materialOptions.find(item => item.id === params.material_id)?.material_type;
		postJson("price/fd/save", params)
			.then(() => {
				proxy.$message.success("提交成功", 1);
				modalRef.value.visible = false;
				initData();
			})
			.catch(err => {
				proxy.$message.error(err);
			});
	})
		.catch(err => {});
}
const beforeUpload = file => {
	modalRef.value.upload = true;
	const isLt10M = file.size / 1024 / 1024 < 10;
	if (!isLt10M) {
		proxy.$message.error("只能上传10MB以下文件");
		modalRef.value.upload = false;
		return false;
	}
};
const fileChangeUpload = ({ file }) => {
	if (file.status === "done") {
		modalRef.value.form.file_path = [{
			name: file.name,
			url: file.response.data.url
		}];
		modalRef.value.upload = false;
		proxy.$message.success("附件上传成功");
	}
	if (!file.status) {
		modalRef.value.form.file_path = modalRef.value.form.file_path.filter((item) => item.url)
	}

};
</script>
<style scoped lang="scss">
.container {
  background: #fff;
  padding: 12px;
  :deep(::-webkit-scrollbar) {
    width: 8px;
    height: 8px;
  }

  /* 修改滚动条轨道的背景颜色 */
  :deep(::-webkit-scrollbar-track) {
    background: #ffffff;
  }

  /* 修改滚动条滑块的背景颜色 */
  :deep(::-webkit-scrollbar-thumb) {
    background: #d7e7fd;
    border-radius: 1rem;
  }

  /* 修改滚动条滑块悬停时的背景颜色 */
  :deep(::-webkit-scrollbar-thumb:hover) {
    background: #abb5be;
  }
}
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
:deep(.ant-picker-calendar-date:has(.completion)) {
  background-color: #c6ffc7;
}
:deep(.ant-picker-calendar-date:has(.uncompletion)) {
  background-color: #ffd5d5;
}
:deep(.ant-picker-calendar-date:has(.disabled)) {
  background-color: #d7d7d7 !important;
}
.click-box{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	button{
		margin-top: 0 !important;
	}
	
}
.click-box-have{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
</style>